I have a react/redux page that makes a call to an API that in the response that can return things that will need to be added to either before the </head>(head) or before the </body> (footer). They can be custom meta tags, css and/or scripts. I tried doing window.document.head.appendChild but that only works on nodes and I have to create the element.

The response should come back in the correct format so for example

<meta name=test123> <script type=text/javascript src=test123></script>

I tried doing window.document.head.innerHTML = <script ...> which appends it to the top but then it messes up all of the styling for some reason. When I did window.document.head.innerHTML += <script ...> it caused lots of repeats.

So I was wondering what's the best way to do this because from the googling I've done I've only seen the appendChild mentioned most of the time.

Also what would the best way to append it to before the </body>(footer) tag?